<template>
  <div class="add-box">
    <w-form-validate @on-validate='saveRole'>
      <div class="e-add">
        <div class="o">
          <span class="title">角色编码</span>
          <div class="o-select dis-block">
            <w-input :holder="`请填写`" v-model="addParams.roleCode" rule="isEmpty" error="*此项必填" :disabled='seeState'></w-input>
          </div>
        </div>
        <div class="o">
          <span class="title">角色名称</span>
          <div class="o-select dis-block">
            <w-input :holder="`请填写`" v-model="addParams.roleName" rule="isEmpty" error="*此项必填" :disabled='seeState'></w-input>
          </div>
        </div>
        <div class="o">
          <span class="title">角色描述</span>
          <div class="o-select dis-block" style="width:436px;">
            <w-input :holder="`请填写`" v-model="addParams.roleDescription" rule="isEmpty" error="*此项必填" :disabled='seeState'></w-input>
          </div>
        </div>
        <!-- 操作权限 -->
        <all-per :isEdit='seeState' :permissionList='permissionList' :defaultChecked='defaultChecked' @get-checkedPermission='_getCheckedPermission'></all-per>
      </div>
      <div class="sure-btn">
        <button type="submit" :disabled='seeState'>确定</button>
      </div>
    </w-form-validate>
  </div>
</template>

<script>
import { apiSystemMange } from 'js/api'
import { mapGetters } from 'vuex'
import AllPermission from '../employeeMange/components/allPermission'

export default {
  data() {
    return {
      permissionList: [], // 权限集合
      checkedPermission: [], // 选中的权限集合
      defaultChecked: [],
      // 新增角色 -- 参数
      addParams: {
        accessToken: '',
        threeMenuCode: this.$route.query.three || '',
        id: this.$route.query.id || '',
        roleName: this.$route.query.name || '',
        roleCode: this.$route.query.code || '',
        roleDescription: this.$route.query.desc || ''
      },
      // 保存权限 -- 参数
      saveParams: {
        accessToken: '',
        threeMenuCode: this.$route.query.three || '',
        authIds: [],
        id: this.$route.query.id || ''
      },
      // 编辑角色时，查询该角色的权限 -- 参数
      queryRolePar: {
        accessToken: '',
        threeMenuCode: this.$route.query.three || '',
        id: this.$route.query.id || ''
      },
      seeState: !!this.$route.query.seeState || false
    }
  },
  created() {
    this._getPermission()
  },
  computed: {
    ...mapGetters(['token'])
  },
  components: {
    'all-per': AllPermission
  },
  methods: {
    // 获取权限列表
    _getPermission() {
      apiSystemMange.getMenuLis({accessToken: this.token}).then(data => {
        this.permissionList = data.data.menu
        this.permissionList.forEach(v => {
          this.$set(v, 'isShowListItem', true)
          this.$set(v, 'isChecked', false)
          // 二级 循环
          v.twoList.forEach(val => {
            this.$set(val, 'isShowListItem', true)
            this.$set(val, 'isChecked', false)
            // 三级 循环
            if (val.threeList && val.threeList.length > 0) {
              val.threeList.forEach(value => {
                this.$set(value, 'isShowListItem', true)
                this.$set(value, 'isChecked', false)
                this.$set(value, 'add', false)
                this.$set(value, 'update', false)
                this.$set(value, 'delete', false)
                this.$set(value, 'select', false)
              })
            }
          })
        })
        // 编辑/查看 时调用
        if (this.$route.query.id) {
          this.rolePermission()
        }
      })
    },
    // 新增角色
    saveRole() {
      this.addParams.accessToken = this.token
      apiSystemMange.addRole(this.addParams).then(data => {
        if (data.code != '200') return
        // 保存权限
        this.saveParams.accessToken = this.token
        this.saveParams.authIds = this.checkedPermission
        let toastStr = '角色修改成功,正在保存权限'
        if (!this.saveParams.id) {
          this.saveParams.id = data.data.id
          toastStr = '角色新增成功，正在保存权限'
        }
        this.$toast(toastStr, () => {
          apiSystemMange.saveROlePermission(this.saveParams).then(req => {
            if (req.code != '200') return
            this.$toast('角色权限保存成功', () => {
              this.$router.push(`/roleMange/list?three=roleList`)
            })
          })
        })
      })
    },
    // 编辑角色时，查询该角色的权限
    rolePermission() {
      this.queryRolePar.accessToken = this.token
      apiSystemMange.queryRolePermission(this.queryRolePar).then(data => {
        this.defaultChecked = data.data.menu || []
      })
    },
    _getCheckedPermission(data) {
      this.checkedPermission = data
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../../scss/_var.scss';
.e-add {
  border-bottom: 2px solid #D7D7D7;
  .o {
    display: inline-block;
    margin-top: 20px;
    position: relative;
    .title {
        width: 56px;
        display: inline-block;
        margin-left: 20px;
        font-size: 12px;
    }
    .dis-block {
        display: inline-block;
        width: 170px;
    }
  }
  .menu {
    margin: 0 24px;
    li {
      margin-top: 24px;
      position: relative;
      margin-bottom: 24px;
    }
    span {
      font-size: 13px;
    }
  }
  .one-menu {
    position: relative;
    top: -42px;
    left: 56px;
    width: 1110px;
    margin-right: 0;
  }
  .three-menu li{
    display: inline-block;
    margin-right: 40px;
    margin-top: 0;
    margin-bottom: 0;
    &:last-child {
      margin-right: 0;
    }
    & > span {
      display: inline-block;
      margin-top: 24px;
    }
  }
}
.ico-drop {
  position: absolute;
  top: 8px;
  margin-left: 5px;
  z-index: 2;
  width: 0;
  height: 0;
  border: 7px solid transparent;
  border-top-color: #444;
  transition: all .2s;
  &.actived {
    transform: rotate(180deg) translateY(8px);
  }
}
.sure-btn {
  text-align: center;
  margin: 30px auto;
  button {
    background: $color-main;
    width: 90px !important;
    height: 32px;
    border-radius: 5px;
    color: #fff;
  }
}
</style>